<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        姓名：{{name}},年龄{{age}}
    </div>
</body>
<script>
    // 选择要更改的容器
    let oDiv = document.getElementById('div1');
    // 获取要改变容器的内容
    let template = oDiv.innerHTML;
    // _data 是真正的数据
    let _data={
        name:'jiapeng',
        age:'37'
    }
    // data 是代理的数据    new Proxy 是代理对象 相当于一个守卫  更改里面内部值的时候可以监听到内部数据的变化
    // 修改的都代理对象 内部真正的数据是无法修改的
    let data = new Proxy(_data,{
        // obj是真正的data  指_data, name 设置哪个属性 value 设置的值
        set(obj,name,value){
            obj[name] = value
            // 数据变了
            console.log('数据变了');
            render()
        }
    })
    //data.name = 12
    render();
    function render(){
        oDiv.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
            str = str.substring(2,str.length-2);
            return _data[str];
        })
    }
</script>

</html>